<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="800px"
    :before-close="cancel"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="发车日期" prop="departureTime">
            <el-date-picker
              v-model="form.departureTime"
              type="date"
              placeholder="请选择发车日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="提货日期" prop="cargoTime">
            <el-date-picker
              v-model="form.cargoTime"
              type="date"
              placeholder="请选择提货日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="路线" prop="path">
            <el-select v-model="form.path" clearable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.label"
                :label="item.label"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="供应商" prop="supplier">
            <el-select
              ref="myselect"
              @change="getvaluemethod"
              v-model="form.supplier"
              clearable
              filterable
              placeholder="请选择供应商"
            >
              <el-option

                v-for="item in supplierList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="货物数量" prop="num">
            <el-input
              v-model="form.num"
              placeholder="请输入货物数量"
              type="number"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="货物单位" prop="goodsUnit">
            <!-- <el-input v-model="form.goodsUnit" placeholder="请输入货物单位" type="" /> -->
            <el-select v-model="form.goodsUnit" clearable placeholder="请选择">
              <el-option
                v-for="dict in dict.type.goods_unit"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="货物吨位" prop="goodsWeight">
            <el-input
              v-model="form.goodsWeight"
              placeholder="请输入货物吨位"
              type="number"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12"></el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="货物尺寸" prop="goodsSize">
            <el-input
              v-model="form.goodsSize"
              type="textarea"
              placeholder="请输入货物尺寸"
              rows="5"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-row type="flex" justify="space-between">
            <el-col :span="11">
              <el-form-item label="发货联系人" prop="contact">
                <el-input
                  v-model="form.contact"
                  placeholder="请输入发货人姓名"
                />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="" prop="mobile" label-width="0px">
                <el-input
                  v-model="form.mobile"
                  placeholder="请输入发货人联系方式"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="发货地址" prop="address">
            <el-input v-model="form.address" placeholder="请输入发货地址"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-row type="flex" justify="space-between">
            <el-col :span="11">
              <el-form-item label="收货方联系人" prop="receiverName">
                <el-input
                  v-model="form.receiverName"
                  placeholder="请输入收货方姓名"
                />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="" prop="receiverPhone" label-width="0px">
                <el-input
                  v-model="form.receiverPhone"
                  placeholder="请输入收货方联系方式"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="收货地址" prop="receiverAddress">
            <el-input
              v-model="form.receiverAddress"
              placeholder="请输入收货地址"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="form.remark"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {addPlan, getSupplierDetail} from "@/api/tms/plan.js";
import {getSupplier} from "@/api/tms/inventory";

export default {
  dicts: ["goods_unit"],
  props: {
    dialogVisible: Boolean,
    title: String,
    line: Array,
  },
  data() {
    return {
      supplierList: [],
      form: {
        contact: "",
        mobile: "",
        address: "",
        id: "",
        departureTime: "",
        cargoTime: "",
        path: "",
        supplier: "",
        num: "",
        goodsUnit: "",
        goodsWeight: "",
        goodsSize: "",
        sendName: "",
        sendPhone: "",
        sendAddress: "",
        receiverName: "",
        receiverPhone: "",
        receiverAddress: "",
        remark: "",
        saveBy: "",
      },
      options: this.line,
      rules: {
        // departureTime: [
        //   { required: true, message: "请选择发车日期", trigger: "blur" },
        // ],
        // cargoTime: [
        //   { required: true, message: "请选择发车日期", trigger: "blur" },
        // ],
        path: [{required: true, message: "请选择路线", trigger: "blur"}],
        // supplier: [
        //   { required: true, message: "请选择供货商", trigger: "blur" },
        // ],
        // // num: [{ required: true, message: "请输入货物数量", trigger: "blur" }],
        // goodsUnit: [
        //   { required: true, message: "请输入货物单位", trigger: "blur" },
        // ],
        // goodsWeight: [
        //   { required: true, message: "请输入货物重量", trigger: "blur" },
        // ],
      },
    };
  },
  watch: {
    dialogVisible(newVal) {
      if (newVal) {
        this.getSupplierList()
      }
    }
  },
  methods: {
    getSupplierList() {
      getSupplier().then((res) => {
        for (let i in res.data) {
          this.supplierList.push({
            label: res.data[i].name,
            value: res.data[i].id,
          });
        }
      });
      console.log(this.supplierList);
    },
    getvaluemethod(val) {
      getSupplierDetail(val).then((res) => {
        if (res.code == 200) {
          this.form.contact = res.data.contact;
          this.form.mobile = res.data.mobile;
          this.form.address = res.data.address;
        } else {
          this.$message.error("该供货商无关联信息！");
          this.form.contact = "";
          this.form.mobile = "";
          this.form.address = "";
        }
      });
    },
    submitForm() {
      // console.log(this.$refs.myselect.selected.label);
      this.form.supplier = this.$refs.myselect.selected.label
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let data = {
            id: this.form.id,
            departDate: this.form.departureTime,
            pickDate: this.form.cargoTime,
            transportLine: this.form.path,
            supplier: this.form.supplier,
            goodsNum: Number(this.form.num),
            goodsUnit: this.form.goodsUnit,
            goodsWeight: this.form.goodsWeight,
            goodsSize: this.form.goodsSize,
            deliverName: this.form.contact,
            deliverMobile: this.form.mobile,
            deliverAddress: this.form.address,
            arrivalName: this.form.receiverName,
            arrivalMobile: this.form.receiverPhone,
            arrivalAddress: this.form.receiverAddress,
            remark: this.form.remark,
            saveBy: this.form.saveBy,
          };
          addPlan(data).then((response) => {
            this.$modal.msgSuccess("添加成功");
            this.$refs["form"].resetFields();
            this.$emit("refresh");
          });
        }
      });
    },
    cancel() {
      this.$emit("refresh");
    },
  },
};
</script>

<style scoped>
.row-bg {
  padding: 10px 0;
}
</style>
